import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

// 响应式数据
export const loading = ref(false)
export const tableRef = ref()
export const selectedRows = ref([])

// 搜索表单
export const searchForm = reactive({
  tournament_name: '',
  player_name: '',
  match_time: ''
})

// 分页配置
export const pagerConfig = reactive({
  enabled: true,
  pageSize: 10,
  pageSizes: [10, 20, 50, 100],
  layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'Total']
})

// 表格数据
export const tableData = ref([
  {
    id: 1,
    tournament_name: '2024春季赛',
    player_a: '张三',
    player_b: '李四',
    big_score: '3:1',
    detailed_score: '11:9, 8:11, 11:7, 11:5',
    match_time: '2024-03-15 14:30:00',
    status: 'completed'
  },
  {
    id: 2,
    tournament_name: '2024春季赛',
    player_a: '王五',
    player_b: '赵六',
    big_score: '3:2',
    detailed_score: '11:8, 9:11, 11:13, 11:9, 11:6',
    match_time: '2024-03-15 16:00:00',
    status: 'completed'
  },
  {
    id: 3,
    tournament_name: '2024夏季赛',
    player_a: '孙七',
    player_b: '周八',
    big_score: '3:0',
    detailed_score: '11:6, 11:4, 11:8',
    match_time: '2024-06-20 10:00:00',
    status: 'completed'
  },
  {
    id: 4,
    tournament_name: '2024秋季赛',
    player_a: '陈十一',
    player_b: '刘十二',
    big_score: '2:1',
    detailed_score: '11:5, 9:11, 11:8',
    match_time: '2024-09-10 13:00:00',
    status: 'ongoing'
  }
])

// 方法
export const goBack = () => {
  router.push('/matches/list')
}

export const handleAdd = () => {
  ElMessage.info('新增记录功能开发中...')
}

export const handleView = (row: any) => {
  ElMessage.info(`查看记录: ${row.tournament_name}`)
}

export const handleEdit = (row: any) => {
  ElMessage.info(`编辑记录: ${row.tournament_name}`)
}

export const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除这条记录吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

export const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要删除的记录')
    return
  }
  
  ElMessageBox.confirm(
    `确定要删除选中的 ${selectedRows.value.length} 条记录吗？`,
    '批量删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('批量删除成功')
    selectedRows.value = []
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

export const handleExport = () => {
  ElMessage.info('导出功能开发中...')
}

export const handleImport = () => {
  ElMessage.info('导入功能开发中...')
}

export const handleSearch = () => {
  ElMessage.info('搜索功能开发中...')
}

export const handleReset = () => {
  Object.assign(searchForm, {
    tournament_name: '',
    player_name: '',
    match_time: ''
  })
  ElMessage.info('已重置搜索条件')
}

export const handlePageChange = (params: any) => {
  console.log('分页变化:', params)
}

export const handleCheckboxChange = (params: any) => {
  selectedRows.value = params.records
}

export const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    completed: 'success',
    ongoing: 'warning',
    pending: 'info',
    cancelled: 'danger'
  }
  return statusMap[status] || 'info'
}

export const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    completed: '已结束',
    ongoing: '进行中',
    pending: '待开始',
    cancelled: '已取消'
  }
  return statusMap[status] || '未知'
}

onMounted(() => {
  // 组件挂载后的初始化逻辑
})